<template>
    <div class="album-res">
        <div class="result">
                <h3>
                    搜索<span>{{keywords}}</span>,找到<span>{{albumCount}}张专辑</span>
                </h3>
        </div>
        <!-- 歌曲播放列表 -->
        <SingerAlbum :albumlist="albumlist"/>
        <div class="pageinatin">
            <!-- @size-change="handleSizeChange"
                @current-change="handleCurrentChange" -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[30, 50, 100]"
                :page-size="pageSize"
                layout="prev, pager, next, jumper,total,sizes"
                :total="albumCount">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import SingerAlbum from '@/views/singerdetail/Childcomps/SingerAlbum.vue'
export default {
    name: "",
    components: { SingerAlbum },
    data() {
        return {
            keywords:"",
            // 总记录数
            albumCount:0,
            // 当前页数
            currentPage:1,
            // 每一页展示的条数
            pageSize:30,
            // 专辑的数据
            albumlist:[]
        };
    },
    created() {
        // 先拿到路由参数
        this.keywords = this.$route.params.keywords
        // 获取专辑信息
        this.getSearchAlbumBy();
    },
    methods: {
        // 获取专辑信息
        async getSearchAlbumBy(){
          // 设置偏移量
          let offset = (this.currentPage - 1) * this.pageSize
          let resAlbum = await  this.$API.searchdetail.getSearchAlbum(this.keywords,offset,this.pageSize);
          if(resAlbum.code == 200){
            this.albumCount = resAlbum.result.albumCount;
            this.albumlist = resAlbum.result.albums
          }else{
            this.$message({
                type:'error',
                message:'数据获取失败'
            })
          }
        },
        // 分页组件事件回调
        handleCurrentChange(page){
            this.currentPage = page;
            this.getSearchAlbumBy();
        },
        handleSizeChange(size){
            this.currentPage = 1;
            this.pageSize = size;
            this.getSearchAlbumBy();
        }
    },
    
    
}
</script>
<style lang="less" scoped>
    .result{
        h3{
            margin-top: 10px;
            margin-left: 20px;
        }
    }
    .pageinatin{
        width: 100%;
        text-align: center;
    }
</style>